<#assign module="car"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/form.css">
<link rel="stylesheet" href="${ctx}/assets/css/datetimepicker.css">
<style>
	/* autocomplete */
	div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
	div.ac > ul {margin-top:10px;padding:0;}
	div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
	div.ac > ul > li:hover{background:#eee;}
	div.ac > ul > li > div span {padding-left:15px;}
	div.ac > ul > li > div span em {color:red;font-style: normal;}
</style>
</@override>

<@override name="body">

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default" style="height: 400px;">
				<div class="panel-heading">
					填写品牌型号信息
			    </div>
			    <#if message??>
					<div class="alert alert-warning">${message}</div>
				</#if>
			    <div class="panel-body">
    				<form id="submit_form" action="${ctx}/brandType/add" class="form-horizontal" method="post">
		               
		                 <div class="form-group">   
			      		 	  <label class="col-sm-3 control-label">所属品牌：</label>
			      		 	  <div class="col-sm-3">
			      		 	       <input class="form-control"  id="brandName"  placeholder="请输入已有品牌" value="${brandName?if_exists}" name="brandName" type="text" required /> 
			      		      </div>
				      	 </div>
		                <div class="form-group">
		                    <label class="col-sm-3 control-label">品牌型号名称：</label>
		                    <div class="col-sm-3">
		                    	<input class="form-control"  name="name" type="text" placeholder="如:宝马X1"  required />
		                    </div>
		                </div>
		                
		                <div class="form-group">   
			      		 	  <label class="col-sm-3 control-label">品牌类型顺序：</label>
			      		 	   <div class="col-sm-3">
			      		 	       <input class="form-control"  name="sequence" type="number" min="0" required /> 
			      		      </div>
				      	 </div>
				      	 
		                <div class="form-group" style="margin-left:10px;">
			                <label class="col-sm-3 control-label"></label>
			                <input type="submit" class="btn btn-primary" value="保存">
			                <input type="button" class="btn btn-default" onclick="window.location.href = '${ctx}/brand/list';" value="返回">
			            </div>
					</form>
        		</div>
			</div>
		</div>
	</div>

</@override>
<@override name="footer">
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#brandName').AutoComplete({
            'data': "${ctx}/brandType/getBrand",
			ajaxDataType: 'json',
			ajaxParams:function(keyword){
				return {'brandName':$('#brandName').val()};
			},
            'width': 'auto',
            'async': true,
            'listStyle': 'custom',
	        'emphasis': false,
	        'matchHandler': function(keyword, data){
	            return true;
	        },
	        'createItemHandler': function(index, data){
	        	return "<span>"+data.name+"</span>";
	        },
	        'afterSelectedHandler': function(data){
	        	$('#brandName').val(data.name);
	        }
        }).AutoComplete('show');
	});
	
	
</script>
</@override>
<@extends name="../layout.ftl"/>